<template>
  <div id="app">
    <transition>
      <router-view></router-view>
    </transition>
    <div class="goToTop" v-show="scrolltop" @click="goToTop">
      <img src="../static/image/ico/返回顶部.png" alt="" srcset="">
    </div>
  </div>
</template>

<script>
import footer from './components/Common/Footer'
export default {
  name: 'app',
  components: {
    'app-footer': footer
  },
  data () {
    return {
      scrolltop: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.gotop)
  },
  methods: {
    gotop () {
      let Top = document.body.scrollTop || document.documentElement.scrollTop // 获取当前滚动条位置
      if (Top > 200) {
        this.scrolltop = true
      } else {
        this.scrolltop = false
      }
    },
    goToTop () {
      let nowTop = document.body.scrollTop || document.documentElement.scrollTop // 获取当前滚动条位置
      if (nowTop > 0) {
        window.requestAnimationFrame(this.goToTop)
        window.scrollTo(0, nowTop - (nowTop / 5))
      }
    }
  }

  // watch: {
  //   $route: {
  //     handler: function (val, oldVal) {
  //       console.log(val.name)
  //     },
  //     // 深度观察监听
  //     deep: true
  //   }
  // }

}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
  list-style-type: none;
}
li {
  padding: 6px 0; /*px*/
}
a {
  color: rgba(50, 50, 50, 1);
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 100px 0 120px 0;
  overflow-x: hidden;
}
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-leave-active {
  transition: 0.3s all ease;
}
.goToTop {
  border: 1px solid rgba(155, 155, 155, 1);
  padding: 15px;
  position: fixed;
  bottom: 150px;
  right: 30px;
  img {
    opacity: 0.8;
  }
}
.mint-toast {
  .mint-toast-text {
    font-size: 28px !important; /*px*/
    padding: 0 25px;
    height: 60px; /*px*/
    line-height: 60px; /*px*/
  }
}
</style>
